import React, {useEffect, useState} from "react";
import {Button, Card, CardContent, CardMedia, Divider, Grid, makeStyles, Typography} from "@material-ui/core";
import {Pagination} from "@material-ui/lab";
import {AddRounded} from "@material-ui/icons";

import Map from "../../assets/images/map.png";
import withSpinner from "../../hoc/withSpinner";
import {getAddresses} from "../../shared/services/data.service";
import {Toolbar} from "../../shared/components";

const useStyle = makeStyles(theme => ({
    media: {paddingTop: theme.spacing(15)}
}));

const ViewAllAddress = ({onAdd, onRowClick, ...props}) => {
    const classes = useStyle();
    const [addresses, setAddresses] = useState([]);
    const [pagination, setPagination] = useState({
        count: 0,
        page: 1
    });
    const DATA_PER_PAGE = 9;

    useEffect(() => {
        props.startSpinner();
        getAddresses(200).then(res => {
            props.stopSpinner();
            setAddresses(res.data);
            const count = Math.ceil(res.data.length / DATA_PER_PAGE);
            setPagination({...pagination, count});
        }).catch(error => {
            props.stopSpinner();
            console.error(error)
        });
    }, []);

    const onPageChange = (e, page) => setPagination({...pagination, page});

    return (
        <Grid container spacing={4}>
            <Toolbar
                title="Addresses"
                actions={<React.Fragment>
                    <Button
                        variant="contained"
                        color="primary"
                        startIcon={<AddRounded/>}
                        onClick={onAdd}
                    >
                        Add Address
                    </Button>
                </React.Fragment>}
            />

            <Grid item xs={12}>
                <Grid container spacing={3} alignItems={"center"}>
                    {addresses
                        .slice((pagination.page - 1) * DATA_PER_PAGE, pagination.page * DATA_PER_PAGE)
                        .map(item => (
                            <Grid key={item.id} item xs={4}>
                                <Card elevation={4} onClick={() => onRowClick(item)}>
                                    <CardMedia image={Map} className={classes.media}/>
                                    <CardContent>
                                        <Typography variant={"h6"}>{item.address1}</Typography>
                                        <Typography variant={"h6"}>{item.phone}</Typography>
                                    </CardContent>
                                    <Divider/>
                                </Card>
                            </Grid>
                        ))
                    }
                </Grid>
            </Grid>
            {pagination.count > 0 && <Grid item xs container justify={"center"}>
                <Pagination
                    shape="rounded"
                    onChange={onPageChange}
                    color="primary" {...pagination}
                />
            </Grid>}
        </Grid>
    );
};

export default withSpinner(ViewAllAddress);
